import React,{useState} from 'react'

// class Demo extends React.Component {
//   state={
//     count:0
//   }
//   add=()=>{
//     this.setState({count:this.state.count+1})
//   }
//   render() {
//     return (
//       <div>
//         <h1>当前求和为：{this.state.count}</h1>
//         <button onClick={this.add} className="btn btn-primary">点我加1</button>
//       </div>
//     )
//   }
// }
function Demo() {
  //hook是react16.8的新增特性。它可以让你在不编写class的情况下
  //使用state以及其它的特性
  const [count, setCount] =useState(0)
  const [name, setName] =useState('tom')
  function add() {
    // setCount(count+1) //第一种写法
    setCount(()=>count+1) //第二种写法
  }
  function changeName(){
    setName("jack")
  }
  return (
    <div>
      <h1>当前求和为：{count}</h1>
      <h1>当前名字为：{name}</h1>
      <button onClick={add} className="btn btn-primary">点我加1</button>
      <button onClick={changeName} className="btn btn-primary">改变名字</button>
    </div>
  )
}


export default Demo